<template>
  <view>
    <!-- 生物指标下拉菜单（页面开头） -->
    <view class="biomarker-dropdown-area">
      <view class="biomarker-dropdown-label" @tap="showBiomarkerMenu = !showBiomarkerMenu">
        生物指标 <text class="dropdown-arrow">▼</text>
      </view>
      <view v-if="showBiomarkerMenu" class="biomarker-dropdown-menu">
        <view v-for="item in biomarkerLinks" :key="item.label" class="biomarker-dropdown-item" @tap="goBiomarker(item)">{{ item.label }}</view>
      </view>
    </view>
    <view class="container">
      <!-- 顶部导航 -->
      <view class="navbar">
        <image class="logo" src="/static/logo.png" mode="heightFix" />
        <view class="menu-btn" @tap="openMenu">
          <uni-icons type="bars" size="28" />
        </view>
      </view>
      <!-- 品牌主副标题 -->
      <view class="brand-title-area">
        <view class="brand-title">冠智未来人工智能</view>
        <view class="brand-subtitle">健康生活看得见</view>
      </view>
      <!-- 标题与简介 -->
      <view class="title-section">
        <view class="main-title">Bortz 血龄计算器</view>
        <view class="desc-content">
          <view class="desc-line">基于30.6万个体数据训练，预测精度优于Levine PhenoAge模型<text class="highlight">11%</text>。</view>
        </view>
      </view>
      <!-- 视频区域 -->
      <view class="video-wrapper">
        <video src="https://guanzhihuilei-1369927852.cos.ap-shanghai.myqcloud.com/%E8%A7%86%E9%A2%91%E7%94%9F%E6%88%90%EF%BC%9A%E5%81%A5%E5%BA%B7%E8%80%81%E5%8E%BB.mp4" controls poster="../../static/video-cover.jpg" />
      </view>
      <!-- 优化后的营销横幅 -->
      <view class="banner-area-opt">
        <view class="banner-main">
          <text class="banner-main-strong">已有 20万人</text>
          <text class="banner-main-text">完成了血液年龄检测</text>
        </view>
        <swiper vertical autoplay circular interval="2800" class="banner-marquee-opt">
          <swiper-item v-for="(item, idx) in marqueeList" :key="idx">
            <view class="marquee-item-opt">
              <text class="marquee-time-opt">{{ item.time }}</text>
              <text class="marquee-name-opt">{{ item.name }}</text>
              <text class="marquee-msg-opt">{{ item.msg }}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!-- 表单区域 -->
      <BloodForm @submit="onFormSubmit" />
      <!-- 结果区域 -->
      <view class="result-area">
        <view class="result-title">博茨血龄时代</view>
        <view class="result-value">{{ bloodAge ? bloodAge + '年' : '00年' }}</view>
        <view v-if="compareMsg" class="compare-msg">{{ compareMsg }}</view>
      </view>
      <!-- 生物指标下拉菜单（原有位置） -->
      <view class="biomarker-dropdown-area">
        <view class="biomarker-dropdown-label" @tap="showBiomarkerMenu2 = !showBiomarkerMenu2">
          生物指标 <text class="dropdown-arrow">▼</text>
        </view>
        <view v-if="showBiomarkerMenu2" class="biomarker-dropdown-menu">
          <view v-for="item in biomarkerLinks" :key="item.label" class="biomarker-dropdown-item" @tap="goBiomarker(item)">{{ item.label }}</view>
        </view>
      </view>
      <!-- 科学建议区块 -->
      <view v-if="suggestions.length" class="suggestion-area">
        <view class="suggestion-title">降低血液年龄的科学建议</view>
        <view class="suggestion-desc">以下是对你影响最大的生物指标及优化建议，点击指标可了解更多：</view>
        <view class="suggestion-list">
          <view v-for="(item, idx) in suggestions" :key="item.key" class="suggestion-item">
            <text class="suggestion-index">{{ idx + 1 }}.</text>
            <text class="suggestion-marker clickable" @tap="onMarkerClick(item)" :style="{ color: markerColors[idx % markerColors.length] }">{{ item.marker }}</text>
            <text class="suggestion-action">{{ item.action }}</text>
            <text class="suggestion-impact">{{ item.impact }}</text>
          </view>
        </view>
        <view class="suggestion-summary">综合优化上述指标，预计可降低血液年龄 <text class="highlight">{{ totalImpact }}</text> 年</view>
      </view>
      <!-- 结尾区块 -->
      <view class="footer-adv-area">
        <view class="footer-adv-title">冠智未来健康生活看得见</view>
        <view class="footer-adv-desc">免费、即时计算，无需保存条件。<br/>如有建议请反馈至 <text selectable class="footer-adv-email">guanjun.yang@wsxai.com</text></view>
        <view class="footer-adv-logo-wrap">
          <image class="footer-adv-logo" src="/static/logo.png" mode="heightFix" />
        </view>
        <view class="footer-adv-qrcode-wrap">
          <image class="footer-adv-qrcode" src="/static/qrcode.png" mode="aspectFit" />
          <view class="footer-adv-qrcode-title">微信扫码，获取更多健康工具</view>
        </view>
      </view>
      <!-- 侧边栏菜单 -->
      <SidebarMenu v-if="showMenu" @close="showMenu = false" />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import BloodForm from '@/components/BloodForm.vue'
import SidebarMenu from '@/components/SidebarMenu.vue'
const showMenu = ref(false)
const bloodAge = ref('')
const compareMsg = ref('')
let lastInputAge = ''
function openMenu() {
  showMenu.value = true
}
const markerColors = ['#1976d2', '#e43d33', '#43a047', '#ff9900', '#8e24aa', '#007aff']
const suggestions = ref([])
const totalImpact = ref('0.0')
function onFormSubmit(data) {
  // mock 计算血龄：用年龄+所有数值平均数
  let age = 0
  let sum = 0
  let count = 0
  data.forEach(item => {
    const v = parseFloat(item.value)
    if (item.key === 'age') age = v
    else if (!isNaN(v)) {
      sum += v
      count++
    }
  })
  // mock 公式：年龄 + (其他数值平均/10)
  const calcAge = age ? (age + (count ? sum / count / 10 : 0)).toFixed(1) : ''
  bloodAge.value = calcAge
  lastInputAge = age
  // 专业金句营销
  if (!calcAge || !age) {
    compareMsg.value = ''
    return
  }
  const diff = calcAge - age
  if (Math.abs(diff) < 0.5) {
    compareMsg.value = '你的血龄与实际年龄几乎一致，保持健康的生活方式，你就是自己的健康守护者！'
  } else if (diff < 0) {
    compareMsg.value = '你的血龄比实际年龄年轻' + Math.abs(diff).toFixed(1) + '岁，科学管理让你逆转时光，青春可期！'
  } else {
    compareMsg.value = '你的血龄比实际年龄年长' + Math.abs(diff).toFixed(1) + '岁，健康管理从现在开始，未来的你会感谢今天的选择！'
  }
  // mock建议数据
  suggestions.value = [
    { key: 'vitd', marker: '维生素D-25(OH)D', action: '提升至 70 nmol/L', impact: '可降低 2.8 年' },
    { key: 'cystatin', marker: '胱抑素C', action: '降低至 0.62 mg/L', impact: '可降低 7.3 年' },
    { key: 'rdw', marker: '红细胞分布宽度(RDW)', action: '降低至 12.5%', impact: '可降低 2.7 年' },
    { key: 'creatinine', marker: '肌酐', action: '提升至 95 μmol/L', impact: '可降低 1.7 年' },
    { key: 'rbc', marker: '红细胞计数', action: '提升至 5.3 x10^12/L', impact: '可降低 1.1 年' },
    { key: 'neutrophils', marker: '中性粒细胞', action: '提升至 3.8 x10^9/L', impact: '可降低 1.1 年' }
  ]
  totalImpact.value = '18.1'
}
function onMarkerClick(item) {
  uni.showToast({ title: `点击了 ${item.marker}，可扩展跳转或弹窗`, icon: 'none' })
}
const marqueeList = [
  { time: '5分钟前', name: '李女士', msg: '刚完成血液年龄检测，获得专属健康管理建议' },
  { time: '7分钟前', name: '王先生', msg: '检测血液年龄，收获科学饮食运动方案' },
  { time: '10分钟前', name: '张女士', msg: '血液年龄检测后，获得个性化健康咨询' },
  { time: '12分钟前', name: '赵先生', msg: '检测血液年龄，开启健康逆龄新生活' },
  { time: '15分钟前', name: '陈女士', msg: '血液年龄检测，获得专业健康报告' },
]
const biomarkerLinks = [
  { label: 'C肽', path: '/pages/biomarker/S-C-peptide' },
  { label: '葡萄糖', path: '/pages/biomarker/S-glucose' },
  { label: '维生素D-25(OH)D', path: '/pages/biomarker/S-25-OH-D' },
  { label: '尿酸', path: '/pages/biomarker/S-uric-acid' }
]
const showBiomarkerMenu = ref(false)
const showBiomarkerMenu2 = ref(false)
function goBiomarker(item) {
  if (item.path) {
    uni.navigateTo({ url: item.path })
  }
  showBiomarkerMenu.value = false
  showBiomarkerMenu2.value = false
}
</script>

<style scoped>
.container {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx 0 32rpx;
}
.logo {
  height: 60rpx;
}
.menu-btn {
  padding: 8rpx;
}
.brand-title-area {
  margin: 0 0 12rpx 0;
  text-align: center;
}
.brand-title {
  font-size: 38rpx;
  font-weight: bold;
  color: #222;
  letter-spacing: 2rpx;
  line-height: 1.2;
}
.brand-subtitle {
  font-size: 30rpx;
  color: #007aff;
  margin-top: 2rpx;
  letter-spacing: 1rpx;
  line-height: 1.2;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  margin: 32rpx 0 8rpx 32rpx;
}
.desc {
  color: #666;
  font-size: 26rpx;
  margin: 0 32rpx 24rpx 32rpx;
}
.video-wrapper {
  margin: 0 32rpx 24rpx 32rpx;
  border-radius: 16rpx;
  overflow: hidden;
}
.result-area {
  margin: 32rpx 32rpx 0 32rpx;
  background: #f7f7f7;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
}
.result-title {
  font-size: 32rpx;
  color: #333;
}
.result-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #ff9900;
  margin-top: 8rpx;
}
.compare-msg {
  margin-top: 18rpx;
  color: #007aff;
  font-size: 28rpx;
  font-weight: 500;
}
.footer {
  margin: 48rpx 0 0 0;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}
.feedback {
  margin-top: 8rpx;
}
.footer-logo {
  height: 48rpx;
  margin-top: 16rpx;
}
.footer-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 12rpx;
  letter-spacing: 2rpx;
}
.footer-desc {
  color: #888;
  font-size: 26rpx;
  margin-bottom: 4rpx;
}
.footer-qrcode-title {
  color: #666;
  font-size: 24rpx;
  margin-top: 18rpx;
  margin-bottom: 8rpx;
}
.footer-qrcode {
  width: 180rpx;
  height: 180rpx;
  margin: 0 auto 12rpx auto;
  display: block;
}
.footer-qrcode.prominent {
  width: 260rpx;
  height: 260rpx;
  margin: 18rpx auto 8rpx auto;
  display: block;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx #eee;
  background: #fff;
}
.banner-area {
  margin: 32rpx 32rpx 0 32rpx;
  background: linear-gradient(90deg, #e3f2fd 0%, #fce4ec 100%);
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx #e3e3e3;
  padding: 24rpx 0 12rpx 0;
  text-align: center;
}
.banner-title {
  font-size: 30rpx;
  color: #1976d2;
  font-weight: 500;
  margin-bottom: 8rpx;
}
.banner-strong {
  color: #e43d33;
  font-size: 34rpx;
  font-weight: bold;
}
.banner-marquee {
  height: 48rpx;
  overflow: hidden;
  margin: 0 24rpx;
}
.marquee-swiper {
  height: 48rpx;
}
.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #333;
  letter-spacing: 1rpx;
}
.marquee-time {
  color: #90caf9;
  margin-right: 12rpx;
}
.marquee-name {
  color: #e43d33;
  font-weight: 500;
  margin-right: 8rpx;
}
.marquee-msg {
  color: #388e3c;
}
.banner-area-opt {
  margin: 32rpx 32rpx 0 32rpx;
  background: #f7fbff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx #e3e3e3;
  padding: 24rpx 0 10rpx 0;
  text-align: center;
}
.banner-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 6rpx;
}
.banner-main-strong {
  color: #e43d33;
  font-size: 40rpx;
  font-weight: 700;
  margin-right: 10rpx;
  letter-spacing: 1rpx;
}
.banner-main-text {
  color: #1976d2;
  font-size: 32rpx;
  font-weight: 500;
}
.banner-marquee-opt {
  height: 44rpx;
  margin: 0 18rpx;
}
.marquee-item-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #333;
  letter-spacing: 1rpx;
  padding: 0 4rpx;
}
.marquee-time-opt {
  color: #90caf9;
  margin-right: 10rpx;
  font-size: 24rpx;
}
.marquee-name-opt {
  color: #e43d33;
  font-weight: 500;
  margin-right: 6rpx;
}
.marquee-msg-opt {
  color: #388e3c;
}
.suggestion-area {
  margin: 36rpx 32rpx 0 32rpx;
  background: #f9fbfd;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 12rpx #e3e3e3;
  padding: 32rpx 24rpx 24rpx 24rpx;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}
.suggestion-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 8rpx;
}
.suggestion-desc {
  color: #666;
  font-size: 26rpx;
  margin-bottom: 18rpx;
}
.suggestion-list {
  margin-bottom: 18rpx;
}
.suggestion-item {
  display: flex;
  align-items: baseline;
  font-size: 28rpx;
  margin-bottom: 10rpx;
  line-height: 1.6;
}
.suggestion-index {
  color: #bbb;
  margin-right: 8rpx;
  font-size: 26rpx;
}
.suggestion-marker {
  font-weight: bold;
  margin: 0 8rpx;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
}
.suggestion-marker.clickable:hover {
  opacity: 0.8;
}
.suggestion-action {
  color: #333;
  margin-left: 4rpx;
}
.suggestion-impact {
  color: #e43d33;
  margin-left: 8rpx;
  font-weight: 500;
}
.suggestion-summary {
  margin-top: 10rpx;
  color: #1976d2;
  font-size: 26rpx;
  font-weight: 500;
}
.highlight {
  color: #e43d33;
  font-weight: bold;
}
.footer-adv-area {
  margin: 56rpx 0 0 0;
  padding: 0 0 32rpx 0;
  text-align: center;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 12rpx #e3e3e3;
}
.footer-adv-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 12rpx;
  letter-spacing: 2rpx;
  margin-top: 32rpx;
}
.footer-adv-desc {
  color: #888;
  font-size: 26rpx;
  margin-bottom: 8rpx;
  line-height: 1.7;
}
.footer-adv-email {
  color: #43a047;
  font-weight: 500;
}
.footer-adv-logo-wrap {
  margin: 18rpx 0 0 0;
}
.footer-adv-logo {
  height: 60rpx;
}
.footer-adv-qrcode-wrap {
  margin: 24rpx 0 0 0;
}
.footer-adv-qrcode {
  width: 220rpx;
  height: 220rpx;
  margin: 0 auto 8rpx auto;
  display: block;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx #eee;
  background: #fff;
}
.footer-adv-qrcode-title {
  color: #666;
  font-size: 24rpx;
  margin-top: 12rpx;
  margin-bottom: 8rpx;
}
.biomarker-links-area {
  margin: 36rpx 32rpx 0 32rpx;
  background: #f9fbfd;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 12rpx #e3e3e3;
  padding: 24rpx 24rpx 18rpx 24rpx;
}
.biomarker-links-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 12rpx;
}
.biomarker-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18rpx 24rpx;
}
.biomarker-link-item {
  background: #fff;
  border: 1rpx solid #d0e2f6;
  border-radius: 10rpx;
  padding: 10rpx 28rpx;
  color: #1976d2;
  font-size: 26rpx;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}
.biomarker-link-item:active {
  background: #e3f2fd;
  border-color: #42a5f5;
}
.biomarker-link-text {
  font-weight: 500;
}
.biomarker-dropdown-area {
  margin: 32rpx 32rpx 0 32rpx;
  position: relative;
  z-index: 10;
}
.biomarker-dropdown-label {
  font-size: 30rpx;
  font-weight: bold;
  color: #1976d2;
  background: #fff;
  border: 1rpx solid #d0e2f6;
  border-radius: 10rpx;
  padding: 12rpx 32rpx;
  display: inline-block;
  cursor: pointer;
  box-shadow: 0 2rpx 8rpx #e3e3e3;
}
.dropdown-arrow {
  font-size: 22rpx;
  margin-left: 8rpx;
}
.biomarker-dropdown-menu {
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  box-shadow: 0 4rpx 16rpx #e3e3e3;
  border-radius: 12rpx;
  min-width: 220rpx;
  padding: 8rpx 0;
  z-index: 20;
}
.biomarker-dropdown-item {
  padding: 14rpx 32rpx;
  font-size: 26rpx;
  color: #1976d2;
  cursor: pointer;
  transition: background 0.2s;
}
.biomarker-dropdown-item:active {
  background: #e3f2fd;
}
.title-section {
  margin: 24rpx 32rpx 20rpx 32rpx;
}
.main-title {
  font-size: 38rpx;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 16rpx;
  line-height: 1.2;
  letter-spacing: 1rpx;
}
.desc-content {
  color: #666;
  font-size: 26rpx;
  line-height: 1.6;
}
.desc-line {
  margin-bottom: 4rpx;
}
.highlight {
  color: #e43d33;
  font-weight: 600;
}
</style>
